import React from "react";
import { HighlightedTextIcon } from "components/molecules";
import { AboutSectionContentProps } from "components/organisms/About/types";

const Text = () => (
  <>
    Saat ini saya sedang bekerja sebagai freelance{" "}
    <span className="font-bold text-gray-800">fullstack developer</span> dan{" "}
    <span className="font-bold text-gray-800">UI/UX designer</span>, saya sangat
    suka menggunakan
    <HighlightedTextIcon
      as="a"
      href="https://tailwindcss.com"
      className="mx-2"
      icon={
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
          <g clipPath="url(#prefix__clip0)">
            <path
              fill="#14B4C6"
              fillRule="evenodd"
              d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
              clipRule="evenodd"
            />
          </g>
          <defs>
            <clipPath id="prefix__clip0">
              <path fill="#fff" d="M0 0h54v32.4H0z" />
            </clipPath>
          </defs>
        </svg>
      }
    >
      TailwindCSS
    </HighlightedTextIcon>{" "}
    dan{" "}
    <HighlightedTextIcon
      as="a"
      href="https://reactjs.org"
      className="mx-2"
      icon={
        <svg
          width="30"
          height="27"
          viewBox="0 0 30 27"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0)">
            <path
              d="M24.6652 8.75216C24.3461 8.64133 24.0243 8.53842 23.7 8.44342C23.7539 8.22175 23.8039 7.99921 23.85 7.77579C24.5804 4.18696 24.103 1.29478 22.47 0.342155C20.9048 -0.570886 18.3457 0.381738 15.7604 2.65774C15.5057 2.88205 15.257 3.11294 15.0143 3.35044C14.8517 3.19211 14.6865 3.0373 14.5187 2.886C11.8083 0.454306 9.0913 -0.569567 7.46087 0.383057C5.89957 1.29874 5.43652 4.01807 6.0913 7.41954C6.15826 7.75644 6.23217 8.09157 6.31304 8.42495C5.93087 8.53578 5.55913 8.6532 5.20435 8.77855C2.02826 9.90006 0 11.6549 0 13.4757C0 15.3559 2.17826 17.2427 5.48609 18.384C5.75391 18.4772 6.02435 18.5634 6.29739 18.6426C6.2087 19.0006 6.13043 19.3612 6.06261 19.7245C5.43391 23.0666 5.92435 25.7213 7.48435 26.6317C9.09391 27.5711 11.7965 26.6053 14.43 24.2778C14.6387 24.0949 14.8474 23.9005 15.0561 23.6946C15.3187 23.9524 15.5883 24.2022 15.8648 24.4441C18.4161 26.6633 20.9335 27.5579 22.4909 26.6475C24.1017 25.7041 24.6248 22.8528 23.9452 19.3841C23.893 19.1202 23.833 18.8502 23.7652 18.574C23.9548 18.5177 24.1409 18.4592 24.3235 18.3985C27.763 17.2453 30 15.3809 30 13.4757C30 11.647 27.9065 9.88027 24.6652 8.75216ZM16.6043 3.63676C18.8191 1.68665 20.8891 0.918743 21.8348 1.46762C22.8391 2.05345 23.2278 4.41654 22.5965 7.51586C22.5557 7.71817 22.5109 7.91917 22.4622 8.11884C21.1402 7.81573 19.7999 7.60152 18.45 7.4776C17.6765 6.3537 16.8289 5.28385 15.913 4.27536C16.1374 4.05721 16.367 3.84435 16.6017 3.63676H16.6043ZM8.85652 15.0287C9.1287 15.5599 9.41261 16.0833 9.70826 16.5988C10.01 17.1265 10.3239 17.6468 10.65 18.1597C9.72128 18.0581 8.79832 17.9084 7.88478 17.7111C8.15087 16.8442 8.47696 15.943 8.85783 15.03L8.85652 15.0287ZM8.85652 11.9808C8.48348 11.0862 8.16522 10.2062 7.90435 9.35514C8.7587 9.16118 9.67174 9.00285 10.6226 8.88278C10.3043 9.38417 9.99783 9.89434 9.70304 10.4133C9.40739 10.9288 9.12478 11.4513 8.85522 11.9808H8.85652ZM9.53739 13.506C9.93217 12.6748 10.3583 11.8594 10.8157 11.0598C11.2696 10.2594 11.7539 9.47872 12.2687 8.71786C13.1609 8.64925 14.0752 8.6123 15 8.6123C15.9287 8.6123 16.8443 8.64925 17.7365 8.71786C18.2452 9.47872 18.727 10.2572 19.1817 11.0532C19.6391 11.8502 20.0704 12.6616 20.4757 13.4876C20.0757 14.3214 19.6461 15.1404 19.187 15.9443C18.7322 16.743 18.2522 17.5259 17.747 18.2929C16.8574 18.3589 15.9378 18.3906 15 18.3906C14.0661 18.3906 13.1583 18.3615 12.2843 18.3035C11.7661 17.5382 11.2774 16.754 10.8183 15.9509C10.3609 15.1505 9.93391 14.3351 9.53739 13.5047V13.506ZM20.2983 16.5935C20.5991 16.0631 20.8887 15.5265 21.167 14.9838C21.5481 15.8557 21.8842 16.7471 22.1739 17.6543C21.2502 17.864 20.3163 18.0247 19.3761 18.1359C19.6926 17.6275 19.9996 17.1129 20.297 16.5922L20.2983 16.5935ZM21.1539 11.9821C20.8774 11.4508 20.5904 10.9248 20.293 10.4041C19.9991 9.89214 19.6948 9.38637 19.38 8.88674C20.3361 9.00945 21.253 9.17174 22.1152 9.37097C21.8384 10.2576 21.5176 11.1295 21.1539 11.9834V11.9821ZM15.013 5.20555C15.6373 5.89365 16.2267 6.61321 16.7791 7.36149C15.5983 7.30431 14.4165 7.30431 13.2339 7.36149C13.817 6.58303 14.4143 5.85999 15.0143 5.20555H15.013ZM8.10522 1.50457C9.10957 0.917424 11.327 1.75526 13.667 3.8571C13.817 3.99168 13.967 4.13154 14.117 4.27668C13.1958 5.28532 12.3417 6.35464 11.5604 7.4776C10.2145 7.59982 8.87779 7.81005 7.5587 8.10696C7.48217 7.79734 7.41348 7.48508 7.35261 7.17017V7.17281C6.78783 4.25689 7.16217 2.05873 8.10522 1.50721V1.50457ZM6.63913 17.3944C6.3913 17.3223 6.14522 17.2444 5.90087 17.1608C4.62965 16.7563 3.44292 16.1185 2.4 15.2794C2.10155 15.0718 1.84836 14.8046 1.6561 14.4941C1.46383 14.1836 1.33656 13.8366 1.28217 13.4744C1.28217 12.37 2.91 10.9609 5.62565 10.0043C5.96739 9.88291 6.31174 9.77296 6.6587 9.67444C7.06165 10.9828 7.54967 12.2628 8.11957 13.506C7.54246 14.7674 7.04834 16.0659 6.64044 17.3931L6.63913 17.3944ZM13.5861 23.3054C12.6048 24.2159 11.4663 24.936 10.2274 25.4297C9.90105 25.5879 9.5461 25.6769 9.18447 25.6909C8.82283 25.705 8.46218 25.6439 8.12478 25.5115C7.17913 24.9573 6.78522 22.8278 7.3213 19.9699C7.38565 19.6313 7.4587 19.2952 7.54044 18.9619C8.87349 19.2512 10.2244 19.4487 11.5839 19.553C12.3715 20.682 13.2317 21.7574 14.1587 22.7724C13.9726 22.9544 13.7822 23.1317 13.5874 23.3041L13.5861 23.3054ZM15.0496 21.8382C14.4417 21.1759 13.8365 20.4423 13.2443 19.6532C13.8183 19.6761 14.4035 19.6875 15 19.6875C15.6113 19.6875 16.2148 19.6744 16.8104 19.648C16.2608 20.408 15.6731 21.139 15.0496 21.8382ZM22.8326 23.6419C22.805 24.0072 22.7036 24.3629 22.5346 24.6869C22.3657 25.011 22.1328 25.2966 21.8504 25.526C20.9048 26.0802 18.883 25.3597 16.7022 23.4624C16.4526 23.246 16.2013 23.0147 15.9483 22.7684C16.8575 21.7503 17.6976 20.6712 18.463 19.5385C19.8301 19.4218 21.1877 19.2102 22.5261 18.9051C22.587 19.1549 22.6409 19.3995 22.6878 19.6387C22.9781 20.9533 23.0268 22.3108 22.8313 23.6432L22.8326 23.6419ZM23.9204 17.1674C23.7548 17.2229 23.5865 17.2756 23.4143 17.3258C22.9951 16.0112 22.4878 14.7271 21.8961 13.4823C22.466 12.2544 22.954 10.9893 23.357 9.69555C23.6622 9.78395 23.9609 9.88027 24.2478 9.97923C27.0261 10.945 28.7191 12.3753 28.7191 13.4757C28.7191 14.65 26.8891 16.1726 23.9191 17.1674H23.9204Z"
              fill="#61DAFB"
            />
            <path
              d="M15 10.7652C15.53 10.7652 16.0481 10.9242 16.4887 11.2221C16.9293 11.52 17.2727 11.9434 17.4754 12.4388C17.6781 12.9341 17.731 13.4792 17.6275 14.0049C17.5239 14.5307 17.2684 15.0136 16.8935 15.3925C16.5186 15.7714 16.0409 16.0293 15.5211 16.1336C15.0012 16.2379 14.4624 16.1838 13.9729 15.9783C13.4834 15.7728 13.0652 15.425 12.7711 14.979C12.477 14.533 12.3204 14.0087 12.3209 13.4726C12.3219 12.7545 12.6046 12.0662 13.1069 11.5589C13.6093 11.0515 14.2901 10.7665 15 10.7665"
              fill="#61DAFB"
            />
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="30" height="27" fill="white" />
            </clipPath>
          </defs>
        </svg>
      }
    >
      React
    </HighlightedTextIcon>
    . Saya juga seorang lulusan SMK di SMK MUHAMMADIYAH 1 JAKARTA.
  </>
);

const about: AboutSectionContentProps = {
  text: <Text />,
};

export default about;
